<template>
    <div class = 'predict-legend-wrapper jimu-map-panel jimu-show' v-show = "isShow"> 
		<div v-for="(legend,index) in legendList" :key="index" class="legend-item" @click="toggleLayer(legend.key)">
			<div class="color-block" :style="{
					backgroundColor: legend.color
				}"></div>
			<div class="legend-name">{{legend.name}}</div>
		</div>
    </div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
export default {
	name: 'PredictLegendWidget',
	mixins:[ BaseWidget ],
	data(){
		return {
			
		}
	},

	computed:{
		legendList: function(){
            return this.config.legendList
        },
	},

	methods: {
		toggleLayer: function(key){
			this.bus.$emit("toggle-layer", key)
		}
	}
}
</script>

<style lang="scss">
.predict-legend-wrapper{
	$item-size: 18px;
	position: absolute;
	padding: 15px 10px;
	max-width: 200px;
	z-index: 999;
	.legend-item{
		cursor: pointer;
		margin-bottom: 8px;
		height: $item-size;
		&:last-child{
			margin-bottom: 0px;
		}
	}
	.color-block{
		display: inline-block;
		height: $item-size;
		width: $item-size;
		border-width: 1px;
		border-color: rgb(255, 255, 255);
		box-shadow: 0 2px 5px 0 rgba(0,0,0,.24);
	}
	.legend-name{
		font-size: 12px;
		display: inline-block;
		height: $item-size;
		line-height: $item-size+3px;
		overflow: hidden;
		margin-left: 5px;
	}
}
</style>